<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">


            <!-- 分析 -->
            <!-- 监听文本框数据的改变  -->
            <input type="text" v-model="firstname">+
            <input type="text" v-model="lastname" >=
            <input type="text" v-model="fullname">
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    firstname: '',
                    lastname: '',
                    fullname: '',
                },
                methods:{
                    
                },
                watch: {
                    firstname:function(newVal){
                        // this.fullname = this.firstname+ '-' +this.lastname
                        this.fullname = newVal+this.lastname
                    },
                    lastname:function(newVal){
                        // this.fullname = this.firstname+ '-' +this.lastname
                        this.fullname = this.firstname+newVal
                    },
                },
            })
        </script>
    </body>
</html>